<template>
  <xl-popup :popupShow="visible" :title="title" :height="80" @popupHidden="$emit('onClose')">
    <view class="_wrapper">
      <picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
        <picker-view-column>
            <view class="item" v-for="(item) in options" :key="item.value">{{ item.label }}</view>
        </picker-view-column>
      </picker-view>
      <view class="footer">
        <view class="btns">
          <view class="cancel-btn" @tap="$emit('onClose')">取消</view>
          <view class="sub-btn" @tap="onSubmit">确定</view>
        </view>
      </view>
    </view>
  </xl-popup>
</template>
<script setup> 
  import { watch, ref } from 'vue';
  import xlPopup from '@/components/xl-popup';

  const $emit = defineEmits(['onClose', 'onChange']);
  const props = defineProps({
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '请选择'
    },
    options: {
      type: Array,
      default: []
    },
    value: {
      type: [String, Number]
    }
  });
  const index = props.options.findIndex(v => v.value === props.value);
  const value = ref(index >= 0 ? index : 0);
  const indicatorStyle = `height: 50px;`;

  const bindChange = (e) => {
    value.value = e.detail.value;
  }
  const onSubmit = () => {
    const val = props.options[value.value];
    $emit('onChange', val.value);
  }

  watch(() => props.value, (val) => {
    const index = props.options.findIndex(v => v.value === val.value)
    value.value = index >= 0 ? index : 0;
  })
</script>
<style lang="scss" scoped>
._wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: space-between;
  .picker-view {
		width: 750upx;
		height: 450upx;
		margin-top: 20rpx;
	}
	.item {
		line-height: 100rpx;
		text-align: center;
	}
  .footer {
    height: 100upx;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    .btns {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .cancel-btn {
        width: 250upx;
        height: 80upx;
        border: 1upx solid #dbdbdb;
        color: #3a3a3a;
        text-align: center;
        line-height: 80upx;
        font-size: 28upx;
        border-radius: 10upx;
      }
      .sub-btn {
        width: 250upx;
        margin-left: 50upx;
        height: 80upx;
        background-color: #461E50;
        color: #fff;
        text-align: center;
        line-height: 80upx;
        font-size: 28upx;
        border-radius: 10upx;
      }
    }
  }
}
</style>